/**
 * Created by zhongzihuan on 2018/4/28.
 */

/**
 * Created by zhongzihuan on 2017/5/18.
 * 硬装对比
 */
import React, { Component } from 'react'
import {
	StyleSheet,
	Text,
	Image,
	View,
	Platform,
	TouchableWithoutFeedback,
	ScrollView,
	DeviceEventEmitter,
	ListView,
	InteractionManager,
	Dimensions,
	TouchableOpacity
} from 'react-native'

import {
	AppUtils,
	Code,
	FetchData,
	Title,
	ResStyles,
	ResColors,
	ResDimens,
	PageLoading,
	FunNativeUtils
} from '../../../base/PubImport'
import PreDimens from '../../../../pre_box/res/PreDimens'

let mDs

export default class HardComparePage extends Component {

	// 构造
	constructor(props) {
		super(props)
		mDs = new ListView.DataSource({
			rowHasChanged: (r1, r2) => r1 !== r2,
		})
		// 初始状态
		this.state = {
			sShowLoading: true,
			hardStandardList: [],
			isHide: false,
		}
		this.initVariable()
		this.sendGA()
	}

	sendGA = () => {
		FunNativeUtils.sendTracker('/硬装对比')
	}

	initVariable = () => {
	}

	componentWillMount() {
		this.fetchQueryHardStandard()
	}

	render() {
		return (
			<View style={styles.bigContainer}>
				{this.renderTitle()}
				{this.renderContent()}
			</View>
		)
	};

	/**
	 * 请求方案详情数据
	 */
	fetchQueryHardStandard = () => {
		FetchData.queryHardStandard((code, rspModel) => {
			//数据请求完毕
			if (code == Code.RSP_OK) {
				//数据请求成功
				this.refs.loading.stopAnimation()

				let obj = rspModel.obj
				if (obj) {
					let hardStandardList = obj.hardStandardList
					if (hardStandardList) {
						InteractionManager.runAfterInteractions(
							() => {
								this.setState({
									sShowLoading: false,
									hardStandardList: hardStandardList,
								})
							}
						)
					}
				}

				else {
					alert('暂无方案详情')
				}
			} else {
				//数据请求失败请求失败
				this.refs.loading.processWrongCode(code)
			}
		})
	}

	/**
	 * 标题
	 */
	renderTitle = () => {
		let rightText = ''
		if (this.state.isHide) {
			rightText = '显示全部'
		} else {
			rightText = '隐藏相同'
		}

		let navigation = this.props.navigation
		let sceenProps = navigation.state.hasOwnProperty('params') ? {} : {
			screenProps: this.props.screenProps
		}
		return (
			<Title
				title='硬装对比'
				navigation={navigation}
				{...sceenProps}
				isRightShow={true}
				rightShowType={'text'}
				rightText={rightText}
				onRightClick={() => {
					this.setState({
						isHide: !this.state.isHide
					})
				}}
			/>
		)
	}

	/**
	 * 内容 back
	 */
	renderContentBack = () => {
		if (this.state.sShowLoading) {
			return (
				<PageLoading
					ref="loading"
					refreshListener={() => {
						this.fetchQueryHardStandard()
					}}/>
			)
		} else {
			return (
				<ScrollView style={styles.container}>
					{this.renderTabList()}
					<View style={{height: ResDimens.a220}}/>
				</ScrollView>
			)
		}
	}

	/**********2018-04-27  start***********/
	renderContent = () => {
		const {hardStandardList} = this.state
		if (this.state.sShowLoading) {
			return (
				<PageLoading
					ref="loading"
					refreshListener={() => {
						this.fetchQueryHardStandard()
					}}/>
			)
		} else {
			return (
				<View style={[styles.hardWrap, styles.row]}>
					{/*{this.renderTableHeader(hardStandardList)}*/}
					<View style={styles.tableScrollWrap}>
						<ScrollView>
							<View style={[styles.row, styles.tablesWrap]}>
								<View style={[styles.tableLeftWrap]}>
									<ScrollView
										ref={(ref) => this.leftTable = ref}
									>
										{this.renderTable(hardStandardList, 'left')}
									</ScrollView>
								</View>
								<View style={[styles.tableRightWrap]}>
									<ScrollView
										ref={(ref) => this.rightTable = ref}
									>
										{this.renderTable(hardStandardList, 'right')}
									</ScrollView>
								</View>
							</View>
						</ScrollView>
					</View>
				</View>
			)
		}
	}

	renderTable = (tableData, type) => {
		return(
			<View>
				{tableData.map((tableItem, tableIndex) => {
					this.spaceName = tableItem.spaceName;
					return (
						<View>
							<View style={styles.tableRow}>
								{type == 'left' && <Text>{tableItem.spaceName}</Text>}
							</View>
							<View>
								{tableItem.materialList.map((tableRowItem, tableRowIndex) => {
									if (tableRowIndex > 0) {
										return (
											<View style={[styles.row, styles.tableRow]}>
												{tableRowItem.material.map((tableCellItem, tableCellIndex) => {
													if (type == 'left' && tableCellIndex < 2 ||
														type == 'right' && tableCellIndex > 1) {
														return (
															<View style={[styles.tableCellWrap, type == 'left' && tableCellIndex == 0 ? styles.rowTitle : styles.rowColumn]}>
																<Text>{tableCellItem == '' ? '-' : tableCellItem}</Text>
															</View>
														)
													}
												})}
											</View>
										)
									}
								})}
							</View>
						</View>
					)
				})}
			</View>
		)
	}

	renderTableHeader = (hardStandardList) => {
		let headerData = this.getHeaderData(hardStandardList)
		return (
			<View style={[styles.headerWrap, styles.row]}>
				{headerData.map((headerItem, headerIndex) => {
					return (
						<View style={[styles.flex1, styles.headerItem]}>
							{headerItem !== '硬装' && <Text>{headerItem}</Text>}
						</View>
					)
				})}
			</View>
		)
	}

	getHeaderData = (hardStandardList) => {
		let headerData = []
		if (hardStandardList.length > 0 &&
			hardStandardList[0].materialList &&
			hardStandardList[0].materialList.length > 0 &&
			hardStandardList[0].materialList[0].material &&
			hardStandardList[0].materialList[0].material.length > 0) {
			headerData = hardStandardList[0].materialList[0].material
		}
		return headerData
	}

	/**********2018-04-27  end *******************/

	/**
	 * 表格展示
	 */
	renderTabList = () => {
		let hardStandardList = this.state.hardStandardList
		if (!hardStandardList) {
			return false
		}

		let rowViewArr = []

		for (let i = 0; i < hardStandardList.length; i++) {
			let hardStandardModel = hardStandardList[i]
			rowViewArr.push(
				this.renderItem(hardStandardModel)
			)
		}

		return rowViewArr
	}

	renderItem = (hardStandardModel) => {
		if (!hardStandardModel) {
			return false
		}
		let spaceName = hardStandardModel.spaceName
		let materialList = hardStandardModel.materialList

		if (materialList && materialList.length > 0) {
			let headerList = materialList[0]
			return (
				<View>
					<View style={{alignItems: 'center', marginTop: ResDimens.a60, marginBottom: ResDimens.a20}}>
						<View style={{flexDirection: 'row', alignItems: 'center'}}>
							<View style={[{marginRight: ResDimens.a10}, styles.viewTitleLine]}/>

							<Text style={{fontSize: 16, fontWeight: 'bold'}}>
								{spaceName}
							</Text>

							<View style={[{marginLeft: ResDimens.a10}, styles.viewTitleLine]}/>

						</View>

					</View>

					<View>
						<View style={ResStyles.line}/>
						{this.renderHeader(headerList)}
						{this.renderRowItem(materialList)}
					</View>
				</View>
			)
		} else {
			return false
		}

	}

	renderHeader = (hardStandardModel) => {
		let headerView = []
		if (!hardStandardModel) {
			return false
		}
		let headerNameList = hardStandardModel.material
		for (let i = 0; i < headerNameList.length; i++) {
			let headerName = headerNameList[i]
			let width
			let flex
			if (i == 0) {
				width = ResDimens.a110
				flex = {flex: 0}
			} else {
				flex = {flex: 1}
			}
			headerView.push(
				<View style={[{
					backgroundColor: ResColors.bgGray1,
					width: width,
				}, flex]}>
					<View style={{
						height: ResDimens.a90, width: width, alignItems: 'center',
						justifyContent: 'center', borderRightWidth: ResDimens.a1, borderRightColor: ResColors.line
					}}>
						<Text>
							{headerName}
						</Text>
					</View>

				</View>
			)
		}

		return (
			<View style={{
				flexDirection: 'row',
				height: ResDimens.a90,
				borderBottomColor: ResColors.line,
				borderBottomWidth: ResDimens.a1
			}}>
				{headerView}
				<View style={{height: ResDimens.a1, backgroundColor: 'red'}}/>
			</View>
		)
	}

	/**
	 * 行列表
	 */
	renderRowItem = (materialList) => {
		let lineViewArr = []
		let lineList

		for (let i = 1; i < materialList.length; i++) {
			let rowModel = materialList[i]
			if (!rowModel) {
				return false
			}
			let sameFlag = rowModel.sameFlag
			lineList = rowModel.material
			let backgroundColor
			let pushView
			if (!this.state.isHide && sameFlag == 1) {
				backgroundColor = ResColors.bgOrange4
			} else {
				backgroundColor = ResColors.white
			}

			if (this.state.isHide) {
				if (sameFlag) {
					pushView = false
				} else {
					pushView = <View style={[{
						flexDirection: 'row',
						alignItems: 'center',
						justifyContent: 'center',
						flex: 1,
						backgroundColor: ResColors.bgOrange4
					}]}>
						{this.renderLineItem(lineList)}
					</View>
				}
			} else {
				if (sameFlag) {
					pushView = <View style={[{
						flexDirection: 'row',
						alignItems: 'center',
						justifyContent: 'center',
						flex: 1,
						backgroundColor: ResColors.white
					}]}>
						{this.renderLineItem(lineList)}
					</View>
				} else {
					pushView = <View style={[{
						flexDirection: 'row',
						alignItems: 'center',
						justifyContent: 'center',
						flex: 1,
						backgroundColor: ResColors.bgOrange4,
					}]}>
						{this.renderLineItem(lineList)}
					</View>
				}
			}

			lineViewArr.push(
				pushView
			)
		}
		return (
			<View>
				{lineViewArr}
			</View>
		)
	}

	/**
	 * 列 列表
	 */
	renderLineItem = (lineList) => {

		let heightArr = []
		for (let i = 0; i < lineList.length; i++) {
			heightArr.push(AppUtils.wrap_content(lineList[i]))
		}

		let wrap = AppUtils.maxOfArr(heightArr)
		let maxHeight
		if (wrap < 100) {
			maxHeight = wrap
		} else {
			maxHeight = +wrap + ResDimens.a80
		}

		let lineViewArr = []
		for (let i = 0; i < lineList.length; i++) {
			let lineModel = lineList[i]
			let width
			let bgColor
			let flex
			if (i == 0) {
				width = ResDimens.a110
				flex = {flex: 0}
				bgColor = ResColors.bgGray1
			} else {
				flex = {flex: 1}
			}

			lineViewArr.push(
				<View style={[flex, {backgroundColor: '#FFFFFF'}]}>
					<View style={[{
						width: width,
						backgroundColor: bgColor,
						flex: 1
					}, styles.viewLineView]}>
						<Text style={{fontSize: ResDimens.a24, backgroundColor: '#FFFFFF'}}>
							{lineModel ? lineModel : '-'}
						</Text>
					</View>
				</View>
			)
		}
		return lineViewArr
	}

}

const styles = StyleSheet.create({
	bigContainer: {
		flex: 1,
		backgroundColor: ResColors.white
	},

	viewLineView: {
		alignItems: 'center',
		paddingTop: ResDimens.a10,
		paddingBottom: ResDimens.a10,
		paddingLeft: ResDimens.a16,
		paddingRight: ResDimens.a16,
		justifyContent: 'center',
		borderBottomColor: ResColors.line,
		borderBottomWidth: ResDimens.a1,
		borderRightWidth: ResDimens.a1,
		borderRightColor: ResColors.line
	},
	tvRightTitleStyle: {
		fontFamily: 'PingFang-SC',
		fontSize: 15,
		color: ResColors.tv_light_orange
	},
	viewTitleLine: {
		height: ResDimens.a2,
		width: ResDimens.a28,
		backgroundColor: ResColors.light_orange
	},

	flex1: {
		flex: 1,
	},
	flex2: {
		flex: 2,
	},
	row: {
		flexDirection: 'row',
	},
	column: {
		flexDirection: 'column',
	},
	headerWrap: {
		height: PreDimens.p100,
		justifyContent: 'center',
		width: PreDimens.fill_width,
	},
	hardWrap: {
		flex: 1,
	},
	tablesWrap: {
		position: 'relative',
		width: PreDimens.p2400,
		borderWidth: 1,
	},
	tableRightWrap: {
		width: PreDimens.p1920,
	},
	tableLeftWrap: {
		width: PreDimens.p460,
	},
	tableRow: {
		justifyContent: 'center',
	},
	rowTitle: {
		width: PreDimens.p180,
	},
	rowColumn: {
		width: PreDimens.p280,
	},
	tableCellWrap: {
		alignItems: 'center',
		paddingVertical: PreDimens.p26,
	},
	tableScrollWrap: {
		width: PreDimens.p2400,
	},
})

